@import '../bootstrap'

.bottom-nav
  background: $theme.primary
  left: 0
  box-shadow: 0 3px 14px 2px rgba(#000, .12)
  display: flex
  width: 56px
  justify-content: center
  position: fixed
  transform: translate3d(0, 60px, 0)
  transition: all .4s $transition.swing
  height: 100%
  z-index: 4

  &--absolute
    position: absolute

  &--active
    transform: translate3d(0, 0, 0)

  .btn
    background: transparent !important
    border-radius: 0
    box-shadow: none !important
    width: 100%
    margin: 0
    max-height: 168px
    min-height: 80px
    padding: 0px
    opacity: .5
    height: 100%

    .btn__content
      width: 100%
      flex-direction: column
      width: 56px
      font-size: 12px
      transform: scale3d(1, 1, 1) translate3d(0, 0, 0)
      white-space: nowrap
      will-change: font-size

      i.icon
        color: inherit
        transition: all .4s cubic-bezier(.25, .8, .50, 1)

    &--active
      opacity: 1

      .btn__content
        font-size: 14px

        &:before
          opacity: 0

        .icon
          transform: none

    &:not(.btn--active)
      filter: grayscale(100%)

  &--shift
    .btn__content
      font-size: 14px

      span
        width: 21px

    .btn
      transition: all .3s
      min-height: 56px
      max-height: 96px

      &--active
        min-height: 96px
        max-height: 168px

.bottom-nav--shift
  .btn:not(.btn--active) .btn__content
    .icon
      transform: scale3d(1, 1, 1) translate3d(0, 10px, 0)

    span
      color: transparent
